<template>
    <el-card shadow="never" class="aui-card--fill">
        <div class="mod-photo__photo">
            <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
                <el-form-item>
                    <el-input v-model="dataForm.name" :placeholder="$t('photolabel.name')" clearable></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button @click="getDataList()">{{ $t('query') }}</el-button>
                </el-form-item>
                <el-form-item>
                    <el-button v-if="$hasPermission('photo:label:save')" type="primary" @click="addOrUpdateHandle()">{{
                        $t('add') }}
                    </el-button>
                </el-form-item>
                <el-form-item>
                    <el-button v-if="$hasPermission('photo:label:delete')" type="danger" @click="deleteHandle()">{{
                        $t('deleteBatch') }}
                    </el-button>
                </el-form-item>
            </el-form>
            <el-table
                    v-loading="dataListLoading"
                    :data="dataList"
                    border
                    @selection-change="dataListSelectionChangeHandle"
                    @sort-change="dataListSortChangeHandle"
                    style="width: 100%;">
                <el-table-column type="selection" header-align="center" align="center" width="50"></el-table-column>
                <el-table-column prop="name" :label="$t('photolabel.name')" header-align="center"
                                 align="center"></el-table-column>
                <el-table-column prop="photoInfoSize" :label="$t('photolabel.infoSize')" header-align="center" align="center"
                                 width="180"></el-table-column>
                <el-table-column prop="createDate" :label="$t('photolabel.createDate')" sortable="custom"
                                 header-align="center" align="center"></el-table-column>
                <el-table-column prop="createUser" :label="$t('photolabel.createUser')" header-align="center"
                                 align="center"></el-table-column>

                <el-table-column :label="$t('handle')" fixed="right" header-align="center" align="center" width="150">
                    <template slot-scope="scope">
                        <el-button v-if="$hasPermission('photo:label:update')" type="text" size="small"
                                   @click="addOrUpdateHandle(scope.row.id)">{{ $t('update') }}
                        </el-button>
                        <el-button v-if="$hasPermission('photo:label:delete')" type="text" size="small"
                                   @click="deleteHandle(scope.row.id)">{{ $t('delete') }}
                        </el-button>
                        <el-button v-if="$hasPermission('photo:label:downloadLabelPhoto')" type="text" size="small"
                                   @click="downloadLabelPhotoHandle(scope.row.id)">{{ $t('download') }}
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
                    :current-page="page"
                    :page-sizes="[10, 20, 50, 100]"
                    :page-size="limit"
                    :total="total"
                    layout="total, sizes, prev, pager, next, jumper"
                    @size-change="pageSizeChangeHandle"
                    @current-change="pageCurrentChangeHandle">
            </el-pagination>
            <!-- 弹窗, 新增 / 修改 -->
            <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>
        </div>
    </el-card>
</template>

<script>
    import mixinViewModule from '@/mixins/view-module'
    import AddOrUpdate from './label-add-or-update'

    export default {
        mixins: [mixinViewModule],
        data() {
            return {
                mixinViewModuleOptions: {
                    getDataListURL: '/photo/label/page',
                    getDataListIsPage: true,
                    deleteURL: '/photo/label',
                    deleteIsBatch: true
                },
                dataForm: {
                    name: ''
                },
                evaluatePictureList: []
            }
        },
        methods: {
            clickevaluatePicture(row) {
                let srclist = []
                srclist.push(row.downloadUrl)
                this.evaluatePictureList = srclist
            },
            // 下载标签下所有的照片
            downloadLabelPhotoHandle(id){
                this.$confirm(this.$t('prompt.info', { 'handle': this.$t('download') }), this.$t('prompt.title'), {
                    confirmButtonText: this.$t('confirm'),
                    cancelButtonText: this.$t('cancel'),
                    type: 'warning'
                }).then(() => {
                    this.$http.get(`/photo/label/download-label-photo?labelId=`+id,{responseType:"blob"}).then((res) => {
                        const link = document.createElement('a')
                        let blob = new Blob([res.data], { type: 'application/zip' })
                        link.style.display = 'none'
                        link.href = URL.createObjectURL(blob)
                        const temp =res.headers["content-disposition"].split(";")[1].split("filename=")[1];
                        const fileName = decodeURI(temp)
                        link.download='标签管理'+fileName;
                        document.body.appendChild(link)
                        this.loading = false
                        link.click()
                        document.body.removeChild(link)
                    
                    }).catch(() => {
                        this.$message({
                            message: this.$t('prompt.failed'),
                            type: 'error',
                            duration: 500,
                            onClose: () => {
                                
                            }
                        })
                    })
                }).catch(() => {})
            }
        },
        components: {
            AddOrUpdate
        }
    }
</script>
